<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-search
			placeholder="搜索车,内容等等" 
			:showAction='false'
		></u-search>
		<!-- #endif -->
		
		<view style='width: 100%;height: 500px;background-color: red;'></view>
		
		<sxs-index-list :list='list'>
			<template #index-list='{listKey,listArr}'>
				<view>{{ listKey }}</view>
				<view 
					v-for='(item,index) in listArr' 
					:key='index'
				>
					{{ item.name }}
				</view>
			</template>
		</sxs-index-list>
		
		<view style='width: 100%;height: 500px;background-color: red;'></view>
		
	</view>
</template>

<script>
import sxsIndexList from '@/components/sxs-index-list/sxs-index-list.vue'
import { letterBrand } from '@/api/car.js'
export default{
	components:{
		sxsIndexList
	},
	data() {
		return {
			list:[
				{
					"letter": "D",
					"data": [
						{
							"id": "10",
							"name": "大熊座",
							"img": "/uploads/mall1/20220107/26aa22ef5555f261a311d1f6729fdc83.png"
						},
						{
							"id": "9",
							"name": "戴的EV",
							"img": "/uploads/mall1/20220107/cbf4b433e5b70f4d83258cae56fa75a4.png"
						}
					]
				},
				{
					"letter": "F",
					"data": [
						{
							"id": "5",
							"name": "风火轮",
							"img": "/uploads/mall1/20220107/dac160484d37d4467bc9c676fdda433c.png"
						},
						{
							"id": "2",
							"name": "凤凰",
							"img": "/uploads/mall1/20220107/40438ea45d027ad962fc0511cc6ade84.jpg"
						}
					]
				},
				{
					"letter": "R",
					"data": [
						{
							"id": "7",
							"name": "瑞否350",
							"img": "/uploads/mall1/20220107/727d2934c8a270a383ea186b154f8769.png"
						}
					]
				},
				{
					"letter": "S",
					"data": [
						{
							"id": "3",
							"name": "赛德",
							"img": "/uploads/mall1/20220107/2eef4e14e44aea4d635eebee9aa6108b.jpg"
						}
					]
				},
				{
					"letter": "X",
					"data": [
						{
							"id": "6",
							"name": "新星600",
							"img": "/uploads/mall1/20220107/d6784fe5cb85e96410ea823684621632.jpg"
						}
					]
				},
				{
					"letter": "Y",
					"data": [
						{
							"id": "11",
							"name": "亚特尊领",
							"img": "/uploads/mall1/20220107/531ddc8db8c51114fa830173d558387d.png"
						},
						{
							"id": "1",
							"name": "宇通",
							"img": "/uploads/mall1/20220107/c45fc8c9a61ea263bbb6b9b13a7754a2.png"
						}
					]
				},
				{
					"letter": "Z",
					"data": [
						{
							"id": "8",
							"name": "自由炮",
							"img": "/uploads/mall1/20220107/00854d7aab6de58c98c9f47730398f30.png"
						}
					]
				}
			],
		}
	},
	onLoad(){
		this.getBrand();
	},
	methods:{
		async getBrand(){
			let res = await letterBrand();
			console.log( res.data.list );
		}
	},
	onNavigationBarSearchInputChanged( e ){
		console.log( e );
	},
	onNavigationBarSearchInputConfirmed( e ){
		console.log( e );
	},
	
}
</script>
